<template>
  <div class="compilation">
    <vue-ueditor-wrap class="editer" v-model="msg" :config="myConfig"></vue-ueditor-wrap>
    <div class="btn-box">
      <el-button @click="handleSave" :loading="loading" type="primary" size="small">保存</el-button>
    </div>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import { DEFAULT_ENTRYPOINT } from '../../../../../config/entrypoint'
import { editQzStudyList } from '../../../../../api/editStudy'

export default {
  name: 'addCompilation', // 编撰
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    },
    viewType: {
      type: String
    }
  },
  components: {
    VueUeditorWrap
  },
  data () {
    return {
      loading: false,
      msg: '',
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: DEFAULT_ENTRYPOINT + '/yuyi-user-boot/api/sys/v1/sysUser/bucketType/sys/fileUpload',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: './UEditor/'
      }
    }
  },
  mounted () {
    this.msg = this.rowData.compile
  },
  watch: {
    rowData () {
      this.msg = this.rowData.compile
    }
  },
  methods: {
    handleSave () {
      const data = this.rowData
      data.compile = this.msg
      data.saveType = this.viewType
      this.loading = true
      editQzStudyList(data).then(() => {
        this.$message.success('编撰修改成功！')
        this.$emit('handleSuccess')
        this.msg = ''
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .compilation {
    padding: 0 20px;

    .editer {
      ::v-deep .edui-editor-iframeholder.edui-default {
        height: calc(100vh - 260px) !important;
      }
    }
    .btn-box{
      text-align: right;
      padding-top: 15px;
    }
  }
</style>
